<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" left-icon="left" title="订单详情" @clickLeft="back"></uni-nav-bar>
	<view class="container">
		<view class="uni-padding-wrap mt40 bg-gray">
			<view class="bg-white bor_r20 mb30 p2030">
			<view class="mt20">订单信息</view>
			<view><text class="mr50">--订单编号</text><text>{{orderInfo.orderNo}}</text></view>
			<view><text class="mr50">--订单渠道</text> <text v-if="orderInfo.orderChannel=='WECHAT'">微信小程序</text></view>
			<view><text class="mr50">--推广编码</text><text>{{orderInfo.inviteMemberNumber}}</text></view>
			<view><text class="mr50">--订单状态</text>
			<text v-if="orderInfo.orderStatus == 1">待支付</text>
			<text v-if="orderInfo.orderStatus == 2">支付中</text>
			<text v-if="orderInfo.orderStatus == 3">支付成功</text>
			<text v-if="orderInfo.orderStatus == 4">已完结</text>
			<text v-if="orderInfo.orderStatus == 9">退款中</text>
			<text v-if="orderInfo.orderStatus == -1">已取消</text>
			</view>
			<view class=""><text class="mr50">--订单金额</text><text>￥{{orderInfo.orderAmount}}</text></view>
			</view>
			<view class="bg-white bor_r20 mb30 p2030">
			<view>队员信息</view>
			<view><text class="mr50">--队员名称</text><text>{{orderInfo.nickName}}</text></view>
			<view class=""><text class="mr50">--队员电话</text><text>{{orderInfo.mobile}}</text></view>
			</view>
			<view class="bg-white bor_r20 mb30 p2030">
			<view>支付信息</view>
			<view><text class="mr50">--支付渠道</text><text v-if="orderInfo.orderPayChannel == 'WECHAT'">微信</text></view>
			<view><text class="mr50">--支付时间</text><text>{{orderInfo.payDate}}</text></view>
			<view class=""><text class="mr50">--流水编号</text><text>{{orderInfo.thirdFlowNo}}</text></view>
			</view>
			<view class="bg-white bor_r20 mb30 p2030" v-if="orderInfo.orderStatus == -1">
			<view>退款信息</view>
			<view><text class="mr50">--退款渠道</text><text v-if="orderInfo.orderPayChannel == 'WECHAT'">微信</text></view>
			<view><text class="mr50">--退款时间</text><text>{{orderInfo.refundDate}}</text></view>
			<!-- <view class=""><text class="mr50">--退款单号</text><text>{{orderInfo.thirdFlowNo}}</text></view> -->
			</view>
			<view class="bg-white bor_r20 mb30 p2030">
			<view class="uni-flex sp_betw"><view class="">行程详情</view><view class="color-blue" @tap="navgetTo('pages/schdule/schdule_detail',orderInfo.travelItineraryId,'')">查看详情</view></view>
			<view><text class="mr50">--行程编号</text><text>{{orderInfo.itineraryNum}}</text></view>
			<view><text class="mr50">--行程状态</text>
			<text v-if="orderInfo.itinerarySta == 'ZT'">组团中</text>
			<text v-if="orderInfo.itinerarySta == 'W'">待出行</text>
			<text v-if="orderInfo.itinerarySta == 'I'">出行中</text>
			<text v-if="orderInfo.itinerarySta == 'O'">已完成</text>
			<text v-if="orderInfo.itinerarySta == 'X'">已取消</text>
			</view>
			<view><text class="mr50">--关联线路</text><text>{{orderInfo.linesTitle}}</text></view>
			<view><text class="mr50">--行程标题</text><text>{{orderInfo.itineraryTitle}}</text></view>
			<view class="mb100"><text class="mr50">--集合时间</text><text>{{orderInfo.collectDate}}</text></view>
			</view>
		</view>
		<view class="fixed-bottom-wrap" v-if="orderInfo.itinerarySta == 'ZT' && orderInfo.orderStatus==3">
			<view class="schdule-card uni-flex">
				<view class="flex-item sign bg-graybe" @click="cancelOrder">
					<text>取消订单</text>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<view>
			<uni-popup ref="dialog" type="dialog" class="pop_dialog">
				<uni-popup-dialog :type="msgType" cancelText="暂不取消" confirmText="确认取消" title="取消确认"
					content="是否确认取消此次订单并退款" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	// import cityData from '@/common/util/city.js'
	export default {
		components: {
			
		},
		data() {
			return {
				orderInfo:{},
				// 单选数据源
				shares: [{
					text: '是',
					value: 0
				}, {
					text: '否',
					value: 1
				}],
				isLeader:false,
				bmtime:"",
				jhtime:"",
				startDate: Date.now(),
				endDate: Date.now() + 180*24*3600*1000,
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: ' ',
						}, ],
					},
				},
				starValue: 0,
				maxStar: 5,
			}
		},
		computed: {
			numbox(e){
				this.schduleFormData.desc = e.detail.value;
			}
		},
		watch: {
		},
		onShow() {
			// let userLoginFlag = storageUtil.getStorageData("isLogin");
			// if (userLoginFlag) {
			// 	this.getOrders();
			// }
		},
		onLoad(option) {
			if(option.param){
				let params = JSON.parse(decodeURIComponent(option.param));
				this.orderInfo.orderNo = params.data;
				this.getOrderInfo(params.data);
			}
			// this.$refs.dialog.open();
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			// 城市选择器
			bindRegionChange: function(e) {
				this.region = e.detail.value;
			},
			// 集合时间change事件
			changebm:function(e){
				this.bmtime = e.detail.value;
			},
			// 报名时间change事件
			changejh:function(e){
				this.jhtime = e.detail.value;
			},
			// 页面跳转
			navgetTo(page, param, type) {
				// let userLoginFlag = storageUtil.getStorageData("isLogin");

				// if (!userLoginFlag || userLoginFlag == '') {
				// 	this.popShowHandle();
				// 	return;
				// }
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			getOrderInfo(ID){
				let requestData = {
					params: {
						orderNo: ID, 
					}
				}
				api.getOrderDetail(requestData).then(res => {
					if (res.code === 0) {
						this.orderInfo = res.data;
						this.GetDetailInfo(res.data.travelItineraryId);
					} else {}
				}).catch()
			},
			GetDetailInfo(ID) {
				let _this = this;
				api.getItineraryInfo({
					params: {
						itineraryId: ID,
					}
				}).then(res => {
					if (res.code === 0) {
						if(_this.orderInfo.leaderNickName == res.data.userName){
							_this.isLeader = true;
						}
						
					} else {}
				}).catch()
			},
			cancelOrder(){
				this.$refs.dialog.open('center');
			},
			dialogConfirm(){
				let that = this;
				let requestData = {
					params: {
						orderNo: this.orderInfo.orderNo, 
					}
				}
				api.cancelOrder(requestData).then(res => {
					if (res.code === 0) {
						that.getOrderInfo(that.orderInfo.orderNo);
						that.$forceUpdate();
					} else {}
				}).catch()
			},
			dialogClose() {
				this.$refs.dialog.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
		background-color: #f8f8f8;
		height: 100vh;
		overflow-y: sc;
	}

	.index-swiper {
		width: 100%;
		height: 670rpx;
	}

	.index-swiper image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.bottom-wrap {
		position: relative;
		top: -60rpx;
	}

	.schduleForm {
		.is-bt {
			position: relative;
			margin-right: 15px;
		}

		.is-bt::after {
			content: "*";
			position: absolute;
			right: 0;
			color: $uni-text-color-red;
		}
	}

	.is-flex {
		display: flex;
		align-items: center;
	}
	.wd55{
		width: 55%;
	}

	.xf-wrap {
		position: relative;
		top: -60rpx;
		overflow: hidden;
	}

	.box-shadow {
		box-shadow: 2rpx 2px 2rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}
	::v-deep .uni-date-x--border{
		border: none !important;
	}

	.xc-desc {
		text {
			margin-bottom: 30rpx;
			display: block;
		}
	}

	.pb130 {
		padding-bottom: calc(130rpx + max(env(safe-area-inset-bottom),20px));
	}

	.share-reward {
		.color-black {
			display: block;
			margin-bottom: 20rpx;
		}

		.is-flex {
			align-items: flex-start;
		}

		.color-gray {
			line-height: 1.8;
			text-align: justify;
			margin-left: 20rpx;
		}
	}

	.fixed-bottom-wrap  {
		position: fixed;
		z-index: 111;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		width: 100%;
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
	}

	.schdule-card {
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: 60rpx;
		border-top: 1px solid #f8f8f8;
		padding-bottom: max(env(safe-area-inset-bottom),20px);

		.flex-item {
			padding-top: 10rpx;
			width: 25%;
			text-align: center;
			line-height: 40rpx;
		}

		.flex-item:last-child {
			width: 100%;
			padding-top: 0;
		}

		text {
			display: block;
		}

		.sign {
			height: 100%;
			color: $uni-text-color-white;
			font-size: 32rpx;
			line-height: 100%;

			text {
				line-height: 100rpx;
			}
		}
	}
	// 弹出框样式
		::v-deep .uni-dialog-title-text {
			font-size: $uni-font-size-36;
			font-weight: 500;
			color: $uni-text-color-normal;
			line-height: 45rpx;
		}
	
		::v-deep .uni-dialog-content-text {
			font-size: $uni-font-size-26;
			color: $uni-text-color-grey6;
			line-height: 52rpx;
		}
	
		::v-deep .uni-dialog-button {
			margin: 30rpx 0;
		}
	
		::v-deep .uni-dialog-button-text {
			padding: 15rpx 60rpx;
			border: 1px solid $uni-text-color-green;
			border-radius: 70rpx;
			color: $uni-text-color-green;
		}
	
		::v-deep .pop_dialog .uni-button-color {
			background-color: $uni-text-color-green;
			color: #fff;
		}
	
		::v-deep .uni-border-left {
			border-left: none;
		}
</style>